import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import "./index.scss";
import { Card } from "antd";
import {
  pie_init,
  bar_init,
  transverse_bar_init,
  line_init,
} from "./echarts_init.js";
import { post_axios, text_check } from "../../utils";
export default function Home(props) {
  const { t } = useTranslation();
  const { actions } = props;
  let { user_power_lang, username } = actions;
  user_power_lang = JSON.parse(user_power_lang);

  let localStorage_company = JSON.parse(localStorage.getItem("choose_company"));
  const local_company_object =
    localStorage_company &&
    localStorage_company[username] &&
    localStorage_company[username]
      ? localStorage_company[username]
      : "";

  const [event_data, setEvent_data] = useState([]); //告警事件
  const [organization_structure_data, setSetOrganization_structure_data] =
    useState({}); //组织
  const [market_data, setMarket_data] = useState({}); //市场
  const [avm_data, setAvm_data] = useState({}); //设备
  const [sale_data, setSale_data] = useState({}); //交易
  const [operate_data, setOperate_data] = useState([]); //运营
  const [top_avm_data, setTop_avm_data] = useState([]); //畅销点位
  const [top_goods_data, setTop_goods_data] = useState([]); //畅销商品
  const [sales_daily_data, setSales_daily_data] = useState({}); //每日销量
  const [sales_monthly_data, setSales_monthly_data] = useState({}); //每月销量
  const [sales_pay_channel_data, setSales_pay_channel_data] = useState([]); //支付方式占比

  const get_home_data = async (op_type) => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type,
    };
    let res = await post_axios("home", "m_query", upMsg);
    if (!res) return;
    switch (op_type) {
      case "event":
        setEvent_data(res.data);
        break;
      case "organization_structure":
        setSetOrganization_structure_data(res.data);
        break;
      case "market":
        setMarket_data(res.data);
        break;
      case "avm":
        setAvm_data(res.data);
        let use_avm_data = Object.keys(res.data).map((item) => {
          return {
            name: t(`index.${item}`),
            value: res.data[item],
          };
        });
        use_avm_data = use_avm_data.slice(1);
        pie_init(t(`index.avm`), "avm_pie", use_avm_data);
        break;
      case "sale":
        setSale_data(res.data);
        transverse_bar_init(
          "day_number_line",
          [t("index.yesterday"), t("index.today")],
          t("index.sale_num"),
          [res.data.yesterday_nu, res.data.today_nu]
        );
        transverse_bar_init(
          "month_number_line",
          [t("index.last_month"), t("index.this_month")],
          t("index.sale_num"),
          [res.data.last_month_nu, res.data.this_month_nu]
        );
        transverse_bar_init(
          "day_amount_line",
          [t("index.yesterday"), t("index.today")],
          t("index.sale_money"),
          [res.data.yesterday_mo / 100, res.data.today_mo / 100]
        );
        transverse_bar_init(
          "month_amount_line",
          [t("index.last_month"), t("index.this_month")],
          t("index.sale_money"),
          [res.data.last_month_mo / 100, res.data.this_month_mo / 100]
        );
        break;
      case "operate":
        setOperate_data(res.data);
        break;

      case "top_avm":
        setTop_avm_data(res.data_rows.rows);
        let top_avm_xdata = [];
        let top_avm_ydata = [];
        res.data_rows.rows.forEach((item) => {
          top_avm_xdata.push(item.point);
          top_avm_ydata.push(item.nu);
        });
        bar_init("avm_bar", top_avm_xdata, top_avm_ydata);
        break;
      case "top_goods":
        setTop_goods_data(res.data_rows.rows);
        let top_goods_xdata = [];
        let top_goods_ydata = [];
        res.data_rows.rows.forEach((item) => {
          top_goods_xdata.push(item.subject);
          top_goods_ydata.push(item.nu);
        });
        bar_init("goods_bar", top_goods_xdata, top_goods_ydata);
        break;
      case "sales_daily":
        setSales_daily_data(res.data);
        let { last_month, this_month } = res.data;
        let sales_daily_data1 = last_month.map((item) => {
          return [`${item.pay_day}`.substring(6), item.nu];
        });
        let sales_daily_data2 = this_month.map((item) => {
          return [`${item.pay_day}`.substring(6), item.nu];
        });
        line_init(
          "sales_daily_line",
          t(`index.last_month`),
          sales_daily_data1,
          t(`index.this_month`),
          sales_daily_data2
        );

        break;
      case "sales_monthly":
        let date_obj = {
          "01": {
            msg_en: "Jan.",
            msg_cn: "一月",
            value: "January",
          },
          "02": {
            msg_en: "Feb.",
            msg_cn: "二月",
            value: "February",
          },
          "03": {
            msg_en: "Mar.",
            msg_cn: "三月",
            value: "March",
          },
          "04": {
            msg_en: "Apr.",
            msg_cn: "四月",
            value: "April",
          },
          "05": {
            msg_en: "May.",
            msg_cn: "五月",
            value: "May",
          },
          "06": {
            msg_en: "Jun.",
            msg_cn: "六月",
            value: "June",
          },
          "07": {
            msg_en: "Jul.",
            msg_cn: "七月",
            value: "July",
          },
          "08": {
            msg_en: "Aug.",
            msg_cn: "八月",
            value: "August",
          },
          "09": {
            msg_en: "Sept.",
            msg_cn: "九月",
            value: "September",
          },
          10: {
            msg_en: "Oct.",
            msg_cn: "十月",
            value: "October",
          },
          11: {
            msg_en: "Nov.",
            msg_cn: "十一月",
            value: "November",
          },
          12: {
            msg_en: "Dec.",
            msg_cn: "十二月",
            value: "December",
          },
        };
        setSales_monthly_data(res.data);
        let { last_year, this_year } = res.data;
        let sales_monthly_data1 = last_year.map((item) => {
          return [
            text_check(date_obj[`${item.pay_month}`.substring(4, 6)]),
            item.nu,
          ];
        });
        let sales_monthly_data2 = this_year.map((item) => {
          return [
            text_check(date_obj[`${item.pay_month}`.substring(4, 6)]),
            item.nu,
          ];
        });
        line_init(
          "sales_monthly_line",
          t(`index.last_year`),
          sales_monthly_data1,
          t(`index.this_year`),
          sales_monthly_data2
        );
        break;
      case "sales_pay_channel":
        setSales_pay_channel_data(res.data_rows.rows);
        let use_pay_type_data = res.data_rows.rows.map((item) => {
          return {
            name: text_check(item.subject_pay_type_name),
            value: item.nu,
          };
        });
        pie_init(
          t(`index.sales_pay_channel`),
          "pay_type_pie",
          use_pay_type_data
        );
        break;
      default:
        break;
    }
  };

  useEffect(() => {
    // 挂载后或者更新后的操作
    get_home_data("avm");
    get_home_data("event");
    get_home_data("organization_structure");
    get_home_data("market");
    get_home_data("sale");
    get_home_data("operate");
    get_home_data("top_avm");
    get_home_data("top_goods");
    get_home_data("sales_daily");
    get_home_data("sales_monthly");
    get_home_data("sales_pay_channel");
  }, []);
  return (
    <div className="home modules">
      <div className="iframe_box_left">
        <div className="homeBox shortBox">
          <Card title={t("index.avm")} bordered={false}>
            <div className="cavBox">
              <div id="avm_pie" className="small_pie"></div>
              <div className="pie_msg_show">
                {Object.keys(avm_data).map((key) => {
                  return (
                    <div className="pie_msg_line" key={key}>
                      <div className="pie_msg_line_title">
                        {t(`index.${key}`)}
                      </div>
                      <div className="pie_msg_line_content">
                        {avm_data[key]}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </Card>
          <Card title={t("index.sale_num")} bordered={false}>
            <div className="cavBox">
              <div
                id="day_number_line"
                className="transverse_bar_msg_canvas"
              ></div>
              <div
                id="month_number_line"
                className="transverse_bar_msg_canvas"
              ></div>
            </div>
          </Card>

          <Card title={t("index.sale_money_title")} bordered={false}>
            <div className="cavBox">
              <div
                id="day_amount_line"
                className="transverse_bar_msg_canvas"
              ></div>
              <div
                id="month_amount_line"
                className="transverse_bar_msg_canvas"
              ></div>
            </div>
          </Card>
        </div>
        <div className="homeBox longBox">
          <Card title={t("index.top_avm")} bordered={false}>
            <div className="cavBox">
              <div id="avm_bar" className="normal_pie"></div>
            </div>
          </Card>

          <Card title={t("index.top_goods")} bordered={false}>
            <div className="cavBox">
              <div id="goods_bar" className="normal_pie"></div>
            </div>
          </Card>
        </div>
        <div className="homeBox shortBox">
          <Card title={t("index.sales_daily")} bordered={false}>
            <div className="cavBox">
              <div id="sales_daily_line" className="normal_pie"></div>
            </div>
          </Card>

          <Card title={t("index.sales_monthly")} bordered={false}>
            <div className="cavBox">
              <div id="sales_monthly_line" className="normal_pie"></div>
            </div>
          </Card>

          <Card title={t("index.sales_pay_channel")} bordered={false}>
            <div className="cavBox">
              <div id="pay_type_pie" className="small_pie"></div>
              <div className="pie_msg_show">
                {sales_pay_channel_data.map((item) => {
                  return (
                    <div
                      className="pie_msg_line"
                      key={text_check(item.subject_pay_type_name)}
                    >
                      <div className="pie_msg_line_title">
                        {text_check(item.subject_pay_type_name)}
                      </div>
                      <div className="pie_msg_line_content">{item.nu}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </Card>
        </div>
      </div>
      <div className="iframe_box_right">
        <Card title={t("index.organization")} bordered={false}>
          <div className="card_content">
            {Object.keys(organization_structure_data).map((key) => {
              return (
                <div className="card_square_box" key={key}>
                  <div className="card_square_box_title">
                    {t(`index.${key}`)}
                  </div>
                  <div className="card_square_box_content">
                    {organization_structure_data[key]}
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        <Card title={t("index.market")} bordered={false}>
          <div className="card_content">
            {Object.keys(market_data).map((key) => {
              return (
                <div className="card_square_box" key={key}>
                  <div className="card_square_box_title">
                    {t(`index.${key}`)}
                  </div>
                  <div className="card_square_box_content">
                    {market_data[key]}
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
    </div>
  );
}
